<template>
  <el-container class="main-container">
    <!-- 头部 -->
    <AppHeader/>

    <!-- 主体 -->
    <el-container class="body">
      <!-- 左侧菜单 -->
      <AppSidebar/>

      <!-- 右侧内容 -->
      <router-view/>
    </el-container>

  </el-container>
</template>

<script>
import AppHeader from "./components/AppHeader.vue";
import AppSidebar from "./components/AppSidebar.vue";

export default {
  name: "App",
  components: {
    AppHeader,
    AppSidebar,
  },
};
</script>

<style scoped>
.main-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.footer {
  background-color: #b3c0d1;
  color: white;
  text-align: center;
  line-height: 60px;
}

p{
  margin: 0 0;
}

</style>
<style>
body {
  margin: 0 0;
}
</style>